<template>
  <div class="page-info">
    <myHeader head-title="用户信息" goBack="true"></myHeader>
      <section class="profile-info">
        <section class="headportrait">
          <input type="file" class="profileinfopanel-upload" @change="uploadAvatar">
          <h2>头像</h2>
            <div class="headportrait-div">
              <!-- 显示用户自定义头像，否则显示默认头像 -->
              <img :src="user.avatar" class="headportrait-div-top" v-if="isLoginSucc">
              <span class="headportrait-div-top" v-else>
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
                </svg>
              </span>
              <!-- 右边的箭头 -->
              <span class="headportrait-div-bottom">
                <svg fill="#d8d8d8">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                </svg>
              </span>
            </div>
        </section>
        <router-link to="/profile/info/setusername" class="info-router">
          <section class="headportrait headportraitwo">
            <h2>用户名</h2>
            <div class="headportrait-div">
              <p>{{user.name}}</p>
              <span class="headportrait-div-bottom">
                <svg fill="#d8d8d8">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                </svg>
              </span>
            </div>
          </section>
        </router-link>
        <section class="bind-phone">账号绑定</section>
        <section class="info-router" @click="changePhone">
          <section class="headportrait headportraitwo headportraithree">
            <h2><img src="static/image/bindphone.png" style="display:inline-block;margin-right:.4rem;" alt="">手机</h2>
            <div class="headportrait-div">
              <p>{{user.mobile}}</p>
              <span class="headportrait-div-bottom">
                <svg fill="#d8d8d8">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                </svg>
              </span>
            </div>
          </section>
        </section>
        <section class="bind-phone">安全设置</section>
        <section class="headportrait headportraitwo headportraithree" @click="setSheetVisible">
          <h2>登录密码</h2>
          <div class="headportrait-div">
            <p>修改</p>
            <span class="headportrait-div-bottom">
              <svg fill="#d8d8d8">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </section>
        <router-link to="/profile/info/modloginpwd" class="info-router">
          <mt-actionsheet :actions= "sheetActions" v-model="sheetVisible"></mt-actionsheet>
        </router-link>
        <section class="exitlogin" @click="exitlogin">退出登录</section>
      </section>
    <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  import myHeader from '@/components/common/header/header'
  import alertTip from '@/components/common/alertTip'
  import {mapGetters} from 'vuex'
  export default {
    data() {
      return {
        showAlert: false,
        sheetVisible: false,
        sheetActions: []
      }
    },
    mounted() {
      this.sheetActions = [
        {
          name: '通过旧密码方式',
          method: this.sheetActChgPwd1
        }, {
          name: '通过手机验证方式',
          method: this.sheetActChgPwd2
        }
      ];
    },
    components:{
      myHeader,
      alertTip
    },
    computed: {
      ...mapGetters([
        'user',
        'isLoginSucc',
        'loginErrmsg'
      ])
    },
    methods: {
      exitlogin() {
        this.show = true;
        this.isEnter = true;
        this.isLeave = false;
      },
      /**
       * [上传头像]
       * @return {[type]} [description]
       */
      async uploadAvatar() {
        // if (this.userInfo) {
        //     let input = document.querySelector('.profileinfopanel-upload')
        //     let data = new FormData();
        //     data.append('file', input.files[0]);
        //     try{
        //         let response = await fetch('/eus/v1/users/' + this.userInfo.user_id + '/avatar', {
        //               method: 'POST',
        //               credentials: 'include',
        //               body: data
        //             })
        //         let res = await response.json();
        //         if (res.status == 1) {
        //             this.userInfo.avatar = res.image_path;
        //         }
        //     }catch (error) {
        //         this.showAlert = true;
        //         this.alertText = '上传失败';
        //         throw new Error(error);
        //     }
        // }
      },
      changePhone() {
        this.showAlert = true;
        this.alertText = '敬请期待';
        console.log(this.showAlert);
      }, 
      setSheetVisible() {
        console.log("sheetVisible:", this.sheetVisible)
        this.sheetVisible = true;
      },
      sheetActChgPwd1() {

      },
      sheetActChgPwd2() {

      }
    }//,
    // watch: {
    //   user: function(val, oldVal) {
    //     console.log("val:", val);
    //       // if (val && val.id) {
    //       //     this.username = value.username;
    //       //     this.infotel = value.mobile;
    //       //     this.avatar = value.avatar;
    //       // }
    //   }
    //}
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-info{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .profile-info{
    @include wh(100%,3.1rem);
    .profileinfopanel-upload{
        display: block;
        position: absolute;
        opacity: 0;
        top: 2.35rem;
        left: 0;
        @include wh(100%,3.1rem);
    }
    .headportrait{
        margin-top:.4rem;
        padding:.5rem .4rem;
        @include fj(space-between);
        align-items:center;
        border-top:1px solid #ddd;
        background:#fff;

        h2{
            @include sc(.6rem,#333);
            font-weight:500;
            display:flex;
            align-items:center;
        }
        .headportrait-div{
            span{
                display:inline-block;

                svg{
                    @include wh(100%,100%);
                }
            }
            .headportrait-div-top{
                @include wh(2rem,2rem);
                @include borderRadius(50%);
                vertical-align:middle;
            }
            .headportrait-div-bottom{
                @include wh(.66667rem,1.4rem);
                position:relative;
                top:0.44rem;
            }
        }
    }
    .headportraitwo{
        margin-top:0;
        padding:.3rem .4rem;
        .headportrait-div{
            @include fj(left)
            p{
                text-align:left;
                line-height:1.39rem;
                @include sc(.7rem,#999);
                margin-right:.2rem;
                font-weight:100;
                font-family:Arial;
            }
            .headportrait-div-bottom{
                top:0;
            }
        }
    }
    .headportraithree{
        border-bottom:1px solid #ddd;
    }
    .bind-phone{
        padding:.4rem .4rem;
        @include sc(.5rem,#666);
    }
    .exitlogin{
        width:96%;
        margin:1.3rem auto 0;
        line-height:1.5rem;
        @include borderRadius(5px);
        text-align:center;
        background:#d8584a;
        @include sc(.6rem,#fff);
    }
    .exitlogin:active{
        opacity:.8;
        background:#C1C1C1;
    }
  }
</style>
